<template>
  <div>
    <home-search></home-search>
    <div class="wrap">
      <!-- 轮播图 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
         <van-swipe-item v-for="banner in banners" :key="banner.id">
           <img :src="banner.picUrl" alt="">
         </van-swipe-item>
        </van-swipe>
        <!-- 宫格导航1 -->
        <van-grid :column-num="5" :clickable="true">
          <van-grid-item
          v-for="grid in grids1" :key="grid.id"
          :icon="grid.icon" :text="grid.name" @click="enterList(grid.id)"/>
        </van-grid>
        <div class="divideBg"></div>
        <!-- 热门品类宫格导航 -->
        <div class="hotCates">
          <div class="title">
            <h4>热门品类</h4>
          </div>
          <van-grid :column-num="4" :clickable="true">
            <van-grid-item class="items"
            v-for="grid in grids2" :key="grid.id"
            :icon="grid.icon" :text="grid.name" @click="enterList(grid.id)" />
          </van-grid>
        </div>
        <div class="divideBg"></div>
        <!-- 猜你喜欢 -->
        <guess-like :likes="likes" @detail="toDetail"></guess-like>
      </van-pull-refresh>
    </div>
    <common-tabbar></common-tabbar>
  </div>
</template>

<script>
import CommonTabbar from '@components/CommonTabbar'
import HomeSearch from './components/HomeSearch'
import { getBanner, getGrid, getLike } from '@api'
import GuessLike from './components/GuessLike'
export default {
  data () {
    return {
      banners: [],
      grids1: [],
      grids2: [],
      likeId: 173941,
      likes: [],
      isLoading: false,
      isFirst: true
    }
  },
  components: {
    CommonTabbar,
    HomeSearch,
    GuessLike
  },
  activated () { // 局部刷新，因为Home组件被缓存了
    this.fetchLike()
  },
  created () {
    this.fetchBanner()
    this.fetchGrid()
    this.fetchLike()
  },
  methods: {
    enterList (id) {
      this.$router.push(`/list/${id}`)
    },
    onRefresh () {
      this.fetchLike()
    },
    toDetail ({ id, index }) {
      this.$router.push(`/detail/${id}`)
    },
    // 获取轮播图信息
    fetchBanner () {
      getBanner().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 获取宫格信息
    fetchGrid () {
      getGrid().then(res => {
        if (res.data.code === 0) {
          this.grids1 = res.data.data.filter((ele, index) => index >= 12 && index <= 16)
          this.grids2 = res.data.data.filter((ele, index) => index >= 0 && index < 12)
        }
      })
    },
    // 获取猜你喜欢信息
    fetchLike () {
      getLike({ categoryId: this.likeId })
        .then(res => {
          // if (!this.isFirst) {
          //   Toast('刷新完成')
          // }
          this.isFirst = false
          this.isLoading = false
          this.likes = res.data.data
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap{
  .my-swipe {
  img {
    width: 100%;
      height: 183px;
    }
  }
  /deep/ .van-hairline--top::after {
    border: none
  }
  /deep/ .van-grid-item__content::after {
    border: none;
  }
  /deep/ .van-icon__image {
    width: 40px;
    height: 40px;
  }
  /deep/ .van-grid-item__text {
    color: #444;
  }
  .hotCates {
    border-bottom: 1px solid #e0e0e0;
    .title {
      height: 1.5rem;
      line-height: 1.5rem;
      background-color: #f0f0f0;
      text-align: center;
      color: #444;
      h4 {
        font-size: 15PX;
        font-weight: normal;
        color: #000;
      }
    }
    /deep/ .van-icon__image {
      width: 60PX;
      height: 60PX;
    }
    /deep/ .van-grid-item__content {
      padding: 0 0 5px 0;
    }
     /deep/ .van-hairline--top::after {
      border-top: 1px solid #e0e0e0;
    }
    /deep/ .van-grid-item__content::after {
      border: 1px solid #e0e0e0;
    }
  }
}
</style>
